<template>
  <div :class="prefixCls + '-operation'">
    <template v-if="reverseOperation">
      <e-button type="primary" :class="prefixCls + '-operation-btn'" :disabled="!leftActive" @click="moveToRight">
        <span v-if="operations[1]">{{ operations[1] }}</span>
        <Icon type="arrow"></Icon>
      </e-button>
      <e-button type="primary" :class="prefixCls + '-operation-btn'" :disabled="!rightActive" @click="moveToLeft">
        <Icon type="arrow-left"></Icon>
        <span v-if="operations[0]">{{ operations[0] }}</span>
      </e-button>
    </template>
    <template v-else>
      <e-button type="primary" :class="prefixCls + '-operation-btn'" :disabled="!rightActive" @click="moveToLeft">
        <Icon type="arrow-left"></Icon>
        <span v-if="operations[0]">{{ operations[0] }}</span>
      </e-button>
      <e-button type="primary" :class="prefixCls + '-operation-btn'" :disabled="!leftActive" @click="moveToRight">
        <span v-if="operations[1]">{{ operations[1] }}</span>
        <Icon type="arrow"></Icon>
      </e-button>
    </template>
  </div>
</template>
<script>
import Icon from '../icon/icon.vue';
export default {
  name: 'Operation',
  components: { Icon },
  inject: ['TransferInstance'],
  props: {
    prefixCls: String,
    operations: Array,
    leftActive: Boolean,
    rightActive: Boolean,
    reverseOperation: Boolean
  },
  methods: {
    moveToLeft () {
      this.TransferInstance.moveTo('left');
    },
    moveToRight () {
      this.TransferInstance.moveTo('right');
    }
  }
};
</script>
